import React from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { useState } from 'react';
type Props = {}

export default function Home1({ }: Props) {
    const [list, setList] = useState([
        {
            id: 1,
            name: '提莫',
            type: '法师'
        },
        {
            id: 2,
            name: '剑圣',
            type: '刺客'
        },
        {
            id: 3,
            name: '蒙多',
            type: '坦克'
        }

    ])

    const navigate = useNavigate();
    // 编程式导航跳转的函数
    function gotodetail(item: { id: number, [key: string]: any }) {
        console.log('点击事件', item.id)
        // 跳转页面
        // 以前在v5版面跳转 his.push() 
        // 语法: navigate(path,配置对象)
        // 传递参数1: 查询字符串  navgate(path?key= val&key=val) 
        // navigate('/detail1?id=' + item.id)
        // 传递参数2: 动态路由传参
        //  navigate('/detail1/' + item.id)
        // 隐式传参3:
        navigate('/detail1', {
            state: { id: item.id }
        })

    }

    return (
        <div>
            我是home1页面
            {/* <p><button><Link to='/detail1'>跳转到详情</Link></button></p> */}
            <ul>
                {list.map((item) => {
                    // 01:方式1 : 查询字符串
                    // return <li key={item.id}><Link to={`/detail1?id=${item.id}`} >{item.name}---{item.type}</Link ></li>
                    // 02: 方式2: 动态路由传参(restful风格传参)
                    // return <li key={item.id}><Link to={`/detail1/${item.id}`} >{item.name}---{item.type}</Link ></li>
                    // 第三种方式 使用state 对象进行隐式传参
                    // return <li key={item.id}><Link to='/detail1' state={{ id: item.id }} >{item.name}---{item.type}</Link ></li>

                    // 编程式导航
                    return <li onClick={() => gotodetail(item)} key={item.id}>{item.name}---{item.type}</li>

                })}
            </ul>
        </div>
    )
}